<template>
  <div ref="boxRef" class="main">
    <div class="layout-container">
      <dv-border-box-10>
        <div style="height: 100%">
          <Header></Header>
          <div class="box_dish">
            <div class="box_dish_left">
              <div class="box_dish_left_top">
                <Line :height="heightSon" :width="widthSon">
                  <template v-slot:card>
                    <h1>卡片1</h1>
                  </template></Line
                >
                <Line :height="heightSon" :width="widthSon"></Line>
                <Line :height="heightSon" :width="widthSon"></Line>
                <Line :height="heightSon" :width="widthSon"></Line>
              </div>
              <div class="box_dish_left_center">
                <Line :height="heightSonCenter" :width="widthSonCenter1"></Line>
                <Line :height="heightSonCenter" :width="widthSonCenter2"></Line>
              </div>
              <div class="box_dish_left_bottom">
                <Line :height="heightSonCenter" :width="widthSonCenter1"></Line>
                <Line :height="heightSonCenter" :width="widthSonCenter2"></Line>
              </div>
            </div>
            <div class="box_dish_right">
              <Line :height="heightSonBottom" :width="widthSonBottom"></Line>
              <Line :height="heightSonBottom" :width="widthSonBottom"></Line>
            </div>
          </div>
        </div>
      </dv-border-box-10>
    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import Header from "./components/header.vue";
import Line from "./components/line.vue";
import { useIndex } from "@/utils/useDraw.js"; //组件  大屏自适应
const boxRef = ref();
const heightSon = ref("100%");
const widthSon = ref("22%");
// 中间
const heightSonCenter = ref("100");
const widthSonCenter1 = ref("60%");

const widthSonCenter2 = ref("35%");

// 底部
const widthSonBottom = ref("100%");
const heightSonBottom = ref("46%");

// 生命周期
onMounted(() => {
  const { appRef, calcRate, windowDraw } = useIndex(boxRef.value);
  windowDraw();
  calcRate();
});
onUnmounted(() => {
  const { unWindowDraw } = useIndex(boxRef.value);
  unWindowDraw();
});
</script>
  <style lang="scss" scoped>
.main {
  color: #d3d6dd;
  background-color: #282c34;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;

  .layout-container {
    width: 100%;
    height: 100%;

    .box_dish {
      $common-pd: 50px;
      height: calc(100% - #{$common-pd * 2});
      display: flex;
      .box_dish_left {
        margin: 0 30px 0 30px;
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .box_dish_left_top {
          height: 20%;
          display: flex;
          justify-content: space-between;
        }
        .box_dish_left_center {
          height: 35%;
          display: flex;
          justify-content: space-between;
        }
        .box_dish_left_bottom {
          height: 35%;
          display: flex;
          justify-content: space-between;
        }
      }
      .box_dish_right {
        width: 30%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin-right: 30px;
      }
    }
  }
}
</style>